<template>
  <ProgressSpinner v-if="loading"/>
  <BlockUI :blocked="loading" :fullScreen="true">
    <router-view/>
  </BlockUI>
  <Toast/>
  <ConfirmDialog/>
</template>

<script>
import S from '@/store'
import {computed} from 'vue'

export default {
  setup() {
    let loading = computed(() => S.state.loading)
    return {loading}
  }
}

</script>

<style>
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #161e29;
  color: #fff;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.p-progress-spinner {
  position: absolute!important;
  z-index: 1001;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}

@keyframes p-progress-spinner-color {
  100%,
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
</style>
